<template lang="html">
  <div :class="status == 0?'address':'address address'+status">
    <div v-if="status == 0" class="no-address">
      <div class="pic">
        <img class="max" src="/static/modules/address/address_img_noaddress@2x.png">
      </div>
      <div class="tips">
        您还没有收货地址哦～
      </div>
      <div class="btn btn-default" @click="routeTo('/modules/address/add')">
        添加地址
      </div>
    </div>
    <div v-if="status == 1" class="has-address">
      <div class="address-list">
        <ul>
          <li v-for="(item, idx) in addressList" :key="idx">
            <div class="user-address" @click="fnSelectAds(item)">
              <div class="user-info">
                <span class="user-name">{{ item.name }}</span>
                <span class="user-phone">{{ item.phone }}</span>
              </div>
              <p class="address-detail">
                {{ item.province }}{{ item.city }}{{ item.quxian }}{{ item.address }}
              </p>
            </div>
            <div class="functions">
              <div class="default-status" @click="setUpDefault(item)">
                <i>
                  <img class="max" v-if="item.isdefault" src="/static/modules/address/address_icon_pitchon@2x.png">
                  <img class="max" v-else src="/static/modules/address/address_icon_unselected@2x.png">
                </i>
                <span>
                  设为默认
                </span>
              </div>

              <div class="btns">
                <div class="btn-fun btn-edit" @click="editAddress(item)">
                  <i><img class="max" src="/static/modules/address/address_icon_compile@2x.png" alt=""></i>
                  编辑
                </div>
                <div class="btn-fun btn-edit" @click="delAddress(item.seqid)">
                  <i><img class="max" src="/static/modules/address/address_icon_delete@2x.png" alt=""></i>
                  删除
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="btn btn-default" @click="routeTo('/modules/address/add')">
        新建地址
      </div>
    </div>
  </div>
</template>

<script>
import { getAddressList, delAddress, editAddress } from '@/api/modules/address'
import { Toast, MessageBox } from 'mint-ui';

export default {
  data() {
    return {
      // 0=还没有收货地址，1=有收货地址
      status: 1,
      addressList: null,
    }
  },
  created() {
    document.title = '地址管理'
    this.getAddressList();
  },
  methods: {
    setUpDefault(item) {
      editAddress({
        id: item.seqid,
        name: item.name,
        phone: item.phone,
        province: item.province,
        city: item.city,
        quxian: item.quxian,
        address: item.address,
        isdefault: "1",
        username: this.getUserInfo().username
      }).then(res=>{
        if(res.code == 0){
          Toast('设置成功')
          setTimeout(()=>{
            this.getAddressList();
          }, 500)
        }else{
          Toast(res.mag)
        }
      })
    },
    // 获取列表
    getAddressList() {
      getAddressList({
        username: this.getUserInfo().username
      }).then(res=>{
        console.log(res)
        if(res.data.length == 0){
          this.status = 0;
        }else if(res.data.length > 0){
          this.status = 1;
          this.addressList = res.data;
        }
      })
    },
    // 删除地址
    delAddress(id) {
      MessageBox.confirm("确定删除该条收货地址么？").then(index => {
        delAddress({
          username: this.getUserInfo().username,
          id: id
        }).then(res=>{
          Toast(res.msg)
          if(res.code == 0){
            setTimeout(()=>{
              this.getAddressList();
            }, 500)
          }
        })
      });
    },
    // 编辑
    editAddress(item) {
      this.setlocalStorage('editAddress', item);
      this.$router.push('/modules/address/add?seqid='+item.seqid)
    },
    // 重选
    fnSelectAds(item) {
      if (this.$route.query.source) {
        this.$router.go(-1);
        window.localStorage.setItem("adsData", JSON.stringify(item));
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.address{
  background-color: #fff;
  min-height: 17rem;
  .no-address{
    overflow: hidden;
    text-align: center;
    .pic{
      width: 6.3rem;
      margin: 0 auto;
      margin-top: 1.4rem;
    }
    .tips{
      color: #666666;
      padding-top: .2rem;
    }
  }
  .user-address{

  }
}
.address1{
  background:rgba(243, 243, 243, 1);
}
.has-address{
  padding-bottom: 1rem;
  .address-list{
    li{
      margin: .4rem;
      background-color: #fff;
      border-radius: .14rem;
      padding: .4rem;
      .user-info{
        padding-bottom: .347rem;
        font-size: .38rem;
      }
      .user-phone{
        padding-left: .3rem;
      }
      .address-detail{
        padding-bottom: .45rem;
        color: #9B9B9B;
        font-size: .32rem;
      }
      .functions{
        border-top: 1px solid #E6E3E3;
        padding-top: .3rem;
        overflow: hidden;
        color: #4A4A4A;
        i{
          width: .6rem;
          display: inline-block;
        }
        .default-status{
          float: left;
        }
        .btns{
          float: right;
          .btn-fun{
            float: left;
            margin-left: .4rem;
          }
        }
      }
    }
  }
}
.btn{
  width: 8.5rem;
  margin: 0 auto;
  border-radius: 10rem;
  line-height: 1.3rem;
  font-size: .426rem;
  margin-top: 1rem;
  text-align: center;
}
.btn-default{
  background-color: #36A5F8;
  color: #fff;
}

.address{

}
.has-address{
  overflow: hidden;
}
</style>
